<template>
  <div class="login-box" v-show="Show">
      <div class="y-login">
        <div class="cancel">x</div>
          <form action="">
          <ul>
            <li><a>登录账号</a></li>
            <li class="bgColor"><a>注册账号</a></li>
          </ul>
          <div class="user-login">
            <div class="login-input">
              <p>账号</p>
              <input v-model="username" type="text" placeholder="邮箱/手机/用户名">
            </div>
            <div class="login-input">
              <p>密码</p>
              <input v-model="password" type="password" placeholder="密码">
            </div>
            <div>
              <input type="checkbox"  checked>&nbsp;记住密码
            </div>
              <div>
                <el-button :plain="true" class="button" @click="login">登录</el-button>
          </div>
            <div><p>找回密码&nbsp;&nbsp;|&nbsp;&nbsp;<span style="color:gray">
              还没有注册账号？</span><span class="skip" style="cursor:pointer">立即注册</span></p></div>
          </div>
          </form>
      </div>
  </div>
  
</template>
<script>
import { setCookie, getCookie } from "../assets/js/cookie.js";
import { postData } from "../assets/data/dataRouter.js";
export default {
  data() {
    return {
      Show: true,
      username: "",
      password: ""
    };
  },

  methods: {
    login() {
      if (this.username == "" || this.password == "") {
        this.$message({ message: "请输入用户名或密码", type: "warning" });
      } else {
        let data = { username: this.username, password: this.password };
        /*接口请求*/
        //          this.$http.get(dataJson,data).then(function(res){
        var res = {};

        res.data = postData(data);
        /*接口的传值是(-1,该用户不存在),(0,密码错误)，同时还会检测管理员账号的值*/
        if (res.data == -1) {
          this.$message.error("该用户不存在");
        } else if (res.data == 0) {
          this.$message("密码输入错误");
        } else {
          this.$message({
            message: "登录成功,3秒后跳转主页...",
            type: "success"
          });
          setCookie("username", this.username, 1000 * 60);
          setTimeout(
            function() {
              this.Show = false;
            }.bind(this),
            3000
          );
        }
      }
    }
  }
};
</script>
<style scoped>
p {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}
ul {
  margin: 0;
  padding: 0;
}
.cancel {
  width: 20px;
  height: 20px;
  font-size: 13px;
  background: #21cd30;
  color: white;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  right: 10px;
  top: 7px;
  cursor: pointer;
}
.login-box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  display: none;
  background: rgba(0, 0, 0, 0.5);
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.y-login {
  margin: 225px 36%;
  width: 450px;
  height: 450px;
  background: #ffffff;
  position: fixed;
}

.y-login form ul {
  display: flex;
  justify-content: space-around;
}
.y-login form ul li {
  padding: 22px 79.8px;
  cursor: pointer;
}
.y-login form ul li a {
  font-size: 14px;
  color: #616161;
}
.user-login {
  width: 350px;
  margin: 40px auto;
  font-size: 14px;
}
.user-login div {
  margin-bottom: 20px;
}
.user-login .login-input input {
  width: 349px;
  height: 38px;
  padding: 4px 0 4px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.user-login .login-input input:focus {
  border-color: #21cd30;
}
.user-login .button {
  text-align: center;
  background: #21cd30;
  color: white;
  padding: 12px 160px;
  border: 1px solid white;
  border-radius: 4px;
  transition: all 0.5s;
}
.user-login .button:hover {
  background: #262626;
}
.bgColor {
  background: #f5f5f5;
}
</style>
